<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <!-- 
        img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）
        属性：
        src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
        alt 图片的描述，这个描述默认情况下不显示，有些浏览器会在图片无法加载时显示
        搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所识别


        注意：
        一般情况下在pc端，不建议修改图片的大小，需要多大的图片就裁多大
        但是在移动端，经常需要对图片进行缩放（大图缩小）


        图片的格式：
        jpeg(jpg)
        -支持的颜色比较丰富，不支持透明效果，不支持动图
        -一般用来显示照片
        gif
        -支持的颜色比较少，支持简单透明，支持动图
        -颜色单一的图片，动图
        png
        -支持的颜色丰富，支持复杂透明，不支持动图
        -颜色丰富，复杂透明图片（专为网页而生）
        webp
        -这种格式是副歌新推出的专门用来表示网页中的图片的一种格式
        -它具备其他图片格式的所有有点，而且文件还特别的小
        -缺点,兼容性不好

        base64
        -将图片使用base64拜尼马，这样可以将图片转换为字符，通过字符的形式来引入土拍你

        效果一样，用小的
        效果不一样，用好的
     -->
    <img src="./img/img1.jpg" alt="松鼠">
    <img   width="200" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.Oiopa40PheCaAyAPLrXWOAHaE8?w=269&h=180&c=7&r=0&o=5&pid=1.7" alt="网上图片">
</body>
</html>